/*—————————————————————————————————————————————————————————— form封装组件工具包 ——————————————————————————————————————————————————————————*/
import {
  Input,
  InputProps,
  InputNumber,
  InputNumberProps,
  Radio,
  RadioGroupProps,
  Select,
  SelectProps,
  Slider,
  SliderSingleProps,
  Switch,
  SwitchProps,
  TimePicker,
  TimePickerProps,
  TreeSelect,
  TreeSelectProps,
  Checkbox,
  Cascader,
  CalendarProps,
  DatePicker,
  DatePickerProps,
  ColorPicker,
  ColorPickerProps,
  Upload,
  UploadProps,
  Rate,
  RateProps,
} from 'antd'
import { TextAreaProps, PasswordProps, SearchProps } from 'antd/es/input'
import { RangePickerProps } from 'antd/es/date-picker'
import { CheckboxGroupProps } from 'antd/es/checkbox'

// 组件结构
const { TextArea, Search, Password } = Input
const { RangePicker } = DatePicker

// form表单渲染内容数据表
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
const formRenderedContent = {
  input: {
    element: Input,
    type: {} as InputProps,
  },
  textArea: {
    element: TextArea,
    type: {} as TextAreaProps,
  },
  search: {
    element: Search,
    type: {} as SearchProps,
  },
  password: {
    element: Password,
    type: {} as PasswordProps,
  },
  inputNumber: {
    element: InputNumber,
    type: {} as InputNumberProps,
  },
  radio: {
    element: Radio.Group,
    type: {} as RadioGroupProps,
  },
  select: {
    element: Select,
    type: {} as SelectProps,
  },
  slider: {
    element: Slider,
    type: {} as SliderSingleProps,
  },
  switch: {
    element: Switch,
    type: {} as SwitchProps,
  },
  timePicker: {
    element: TimePicker,
    type: {} as TimePickerProps,
  },
  treeSelect: {
    element: TreeSelect,
    type: {} as TreeSelectProps,
  },
  checkbox: {
    element: Checkbox.Group,
    type: {} as CheckboxGroupProps,
  },
  cascader: {
    element: Cascader,
    type: {} as CalendarProps<unknown>,
  },
  datePicker: {
    element: DatePicker,
    type: {} as DatePickerProps,
  },
  rangePicker: {
    element: RangePicker,
    type: {} as RangePickerProps,
  },
  colorPicker: {
    element: ColorPicker,
    type: {} as ColorPickerProps,
  },
  upload: {
    element: Upload,
    type: {} as UploadProps,
  },
  rate: {
    element: Rate,
    type: {} as RateProps,
  },
}

// ts类型操作
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// form表单渲染内容数据表类型
type FormRenderedContent = typeof formRenderedContent

// 获取 formSupportItem 的keys
type FormSupportItemKys = keyof FormRenderedContent

// 当前form表单支持渲染成员类型字典
type formSupportItemProps = {
  [key in FormSupportItemKys]: FormRenderedContent[key]['type']
}

// 拆解渲染内容中的element组件类型
type FormSupportItem = {
  [key in FormSupportItemKys]: FormRenderedContent[key]['element']
}

// form表单渲染内容数据表类型组件剥离函数(用于动态生成form表单组件需要 element字典)
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
const formRenderedContentElement = (): FormSupportItem => {
  const itemKeys = Object.keys(formRenderedContent)

  // 弹出数据承接对象
  const resultObj = {}

  // 对承接对象循环赋值
  itemKeys.forEach((value: FormSupportItemKys) => {
    resultObj[value] = formRenderedContent[value].element
  })

  return resultObj as FormSupportItem
}

// 导出内容
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// 表单支持渲染成员字典
export const formSupportItem = formRenderedContentElement()

// 表单成员valuePropName字典
export const valuePropNameMap = {
  switch: 'checked',
  checkbox: 'checked',
  upload: 'fileList',
}

// 导出ts类型
export type { FormSupportItem, FormSupportItemKys, formSupportItemProps }
